<template>

  <!-- 门店名称 -->
  <!-- 店主电话 -->
    <div class="amap-page-container">
      <el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult"></el-amap-search-box>
      <el-amap vid="amapDemo" :center="center" :zoom="zoom" class="amap-demo"  :plugin="plugin"  :events="events">
          <el-amap-marker vid="amapDemo" :position="center" icon="https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png" ></el-amap-marker>
          <el-amap-marker v-for="(marker,index) in markers" :key="index" :position="marker" :events="clickMarker"></el-amap-marker>    
          <!-- :icon=" marker == center ? 'https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png':'https://webapi.amap.com/theme/v1.3/markers/n/mark_bs.png'"  -->
          
      </el-amap>
      <div class="toolbar">
        position: [{{ lng }}, {{ lat }}] address: {{ address }}
      </div>
    </div>
  </template>

  <style>
    .amap-demo {
      height: 300px;
    }

    .search-box {
      position: absolute;
      top: 25px;
      left: 20px;
    }
    .toolbar{
      margin-top: 15px;
    }
    .amap-page-container {
      position: relative;
    }
    .el-vue-amap{
      height: 500px !important;
    }
   
  </style>

  <script>
    module.exports = {
      data: function() {
        let self = this;

        return {
          markers: [],
          searchOption: {
            city: '广州',
            citylimit: true
          },
          // mapCenter: [113.260782,23.119976],
          zoom: 12,
          // center: [121.59996, 31.197646],
          center: [113.260782,23.119976],
          address: '',
          events: {
            init(o){
              self.map = o;
            },
            click(e) {
              // self.markers = [];
              let { lng, lat } = e.lnglat;
              self.lng = lng;
              self.lat = lat;
              self.center = [e.lnglat.lng, e.lnglat.lat];//点击选择新地址为中心点

              // 这里通过高德 SDK 完成。
              var geocoder = new AMap.Geocoder({
                radius: 1000,
                extensions: "all"
              });        
              geocoder.getAddress([lng ,lat], function(status, result) {
                if (status === 'complete' && result.info === 'OK') {
                  if (result && result.regeocode) {
                    self.address = result.regeocode.formattedAddress;
                    self.$nextTick();
                  }
                }
              });        
            },
          },
           plugin: [
            "ToolBar",
            {
              pName: "MapType",
              defaultType: 0,
              events: {
                init(o) {
                  console.log(o);
                }
              }
            }
          ],
          clickMarker:{
            click(e){
              let { lng, lat } = e.target.Uh.position;
              self.lng = lng;
              self.lat = lat;
              // console.log(e)
              // console.log(lng)
              // console.log(self.markers)
              self.center = [e.target.Uh.position.lng, e.target.Uh.position.lat];


              var geocoder = new AMap.Geocoder({
                radius: 1000,
                extensions: "all"
              }); 


              geocoder.getAddress([lng, lat], function(status, result) {
                if (status === 'complete' && result.info === 'OK') {
                  if (result && result.regeocode) {
                    self.address = result.regeocode.formattedAddress;
                    self.$nextTick();
                  }
                }
              });

            },

          },
          lng: 0,
          lat: 0
        };
      },
      watch:{
          map:function(){
            if(this.map!=null){
              this.startDrag();
            }
          }
        },
       methods: {
        addMarker: function() {
          let lng = 113.260782 + Math.round(Math.random() * 1000) / 10000;
          let lat = 23.119976 + Math.round(Math.random() * 500) / 10000;
          this.markers.push([lng, lat]);
          console.log(this.markers)
        },
        onSearchResult(pois) {
          let latSum = 0;
          let lngSum = 0;
          if (pois.length > 0) {
            pois.forEach(poi => {
              let {lng, lat} = poi;
              lngSum += lng;
              latSum += lat;
              this.markers.push([poi.lng, poi.lat]);
            });
            let center = {
              lng: lngSum / pois.length,
              lat: latSum / pois.length
            };
            this.center = [center.lng, center.lat];
          }
        },
      }
    };
</script>
